<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--设定页面使用的字符集-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><!--优先使用IE最新片和chrome-->
    <meta  name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><!--禁止缩放-->
    <title>待开奖</title>
    <link rel="stylesheet" href="./css/page2.css">
    <script src="./js/jquery/jquery.min.js"></script>
</head>
<body>
    <div class="fixed_box">
        <div class="body_swiper">
            <img class="banner_bg" src="./images/index_bg.png" alt="">
            <div class="body_content">
                <img class="index_detail" src="./images/index_detail.png" alt="">
                <img class="index_tips" src="./images/index_tips.png" alt="">
                <div class="index_linear_bg">
                    <div class="index_btn_box">
                        <img class="btn_none" style="display:none;" src="./images/page2_btn.png " alt="">
                        <img class="btn_true" style="display:none;" src="./images/page2_btn_act.png " alt="">
                    </div>
                    <p class="index_txt_box">tips：开团提高<span style="color:red;">4%</span>中奖概率<span class="page2_sx" onclick="window.location.href='./page2.html'">刷新</span></p>
                    <div class="index_first_list">
                        <span><img src="./images/icon_user_add.png" alt=""></span>
                        <ul>
                            <li><img src="./images/zhu.png" alt=""></li>
                            <li><img src="./images/zhu.png" alt=""></li>
                            <li><img src="./images/zhu.png" alt=""></li>
                            <li><img src="./images/zhu.png" alt=""></li>
                            <li><img src="./images/zhu.png" alt=""></li>
                            <li><img src="./images/zhu.png" alt=""></li>
                            <li><img src="./images/zhu.png" alt=""></li>
                            <li><img src="./images/zhu.png" alt=""></li>
                            <li><img src="./images/zhu.png" alt=""></li>
                            <li><img src="./images/zhu.png" alt=""></li>
                            <li><img src="./images/zhu.png" alt=""></li>
                        </ul>
                    </div>
                    <p class="index_txt_box">已有<span>xxx</span>人参与，<span class="look_more" onclick="window.location.href='./page4.html'">查看全部 ></span></p>
                    <div class="index_user_list">
                        <ul>
                            <li><img src="./images/zhu.png" alt=""></li>
                            <li><img src="./images/zhu.png" alt=""></li>
                            <li><img src="./images/zhu.png" alt=""></li>
                            <li><img src="./images/zhu.png" alt=""></li>
                            <li><img src="./images/zhu.png" alt=""></li>
                            <li><img src="./images/zhu.png" alt=""></li>
                            <li><img src="./images/zhu.png" alt=""></li>
                            <li><img src="./images/zhu.png" alt=""></li>
                            <li><img src="./images/zhu.png" alt=""></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="fixed_alert">
        <div class="alert_content">
            <img src="./images/alert_bg.png" alt="">
            <p>恭喜你，报名成功！~</p>
        </div>
    </div>
    <div class="fixed_alert_success">
        <div class="alert_content">
            <p>扫描下方二维码，在公众号<br/>点击菜单查询</p>
            <img class="JAY118" style="display:none" src="./images/JAY118.jpg" alt="">
            <img class="JAY520" style="display:none" src="./images/JAY520.jpg" alt="">
            <img class="JYA079" style="display:none" src="./images/JYA079.jpg" alt="">
            <img class="JAY979" style="display:none" src="./images/JAY979.jpg" alt="">
            <img class="close_btn" src="./images/close.png" alt="">
        </div>
    </div>
    <script>
        //点击开奖信息
        $('.btn_true').click(function(){
            eqShow('JYA079');//传入口令
        })

        //根据口令显示二维码
        function eqShow(val){
            
            $('.'+val).show();
            $('.fixed_alert_success').show();
        }
        $('.close_btn').click(function(){
            $('.fixed_alert_success').hide();
            window.location.href='./page3.html';
        })
        //判断开奖时间
        var t;
        times();
        function times(){
            var endtime = "2019-05-04 17:50:00";
            var EndTime = new Date(endtime.replace(/-/g,'/')).getTime();
            var NowTime = new Date(); 
            t =EndTime - NowTime.getTime();
            console.log(t);
            if(t>0){
                $('.btn_none').show();
                $('.btn_true').hide();
            }else{
                $('.btn_none').hide();
                $('.btn_true').show();
            }
        }
        //首次进来弹窗->恭喜你，报名成功！
        var local = localStorage.getItem('local');
        if(!local){
            localStorage.setItem('local', 'true');
            $('.fixed_alert').show();
            setTimeout(function(){$('.fixed_alert').hide();},1500)
        }
        //好友列表渲染
        window.onload = function(){
            var num = $('.index_first_list li').length;
            var aa = $('.index_first_list').width()*0.15;
            var boxW = $('.index_first_list').width();
            if(num<5){
                var oli;
                for(var i=num;i<5;i++){
                    oli = document.createElement('li');
                    $('.index_first_list ul').append(oli);
                }
                $('.index_first_list ul').css('width',(boxW*0.165*5+boxW*0.17)+'px');
            }
            $('.index_first_list li').css('width',aa+'px');
            $('.index_first_list li').css('margin-right',boxW*0.015+'px');
            $('.index_first_list li:first-child').css('margin-left',boxW*0.17+'px');
            $('.index_first_list li').css('height',aa+'px');
            $('.index_first_list').css('height',aa+'px');
            $('.index_first_list ul').css('width',(boxW*0.165*num+boxW*0.17)+'px');
            $('.index_first_list span img').css('height',aa+'px');
            $('.index_first_list span img').css('width',aa+'px');
            $('.index_first_list span li').css('height',aa+'px');
        }
    </script>

</body>
</html>